<template>
  <common-header />
  <div class="content-container">
    <!-- 课程卡片网格 -->
    <div class="course-grid">
      <n-card
        v-for="course in courseList"
        :key="course.courseId"
        class="course-card"
        :bordered="false"
        hoverable
        @click="handleCardClick(course)"
      >        <!-- 课程封面 -->
        <n-image
          :src="course.coverImg?.startsWith('http') ? course.coverImg : (course.coverImg ? BASE_URL + course.coverImg : '/default_course.svg')"
          class="course-image"
          preview-disabled
          object-fit="cover"
          :alt="course.title"
        />
        
        <!-- 课程基本信息 -->
        <n-space vertical class="course-info">
          <n-text strong class="course-title">{{ course.title }}</n-text>
          
          <n-flex justify="space-between" align="center">            <!-- 简化的教练信息展示 -->
            <n-flex align="center" class="coach-info">
              <n-avatar
                round
                size="small"
                :src="course.coach?.avatarImgUrl?.startsWith('http') ? course.coach.avatarImgUrl : (course.coach?.avatarImgUrl ? BASE_URL + course.coach.avatarImgUrl : '/default_avatar.svg')"
                @click.stop="handleCoachAvatarClick(course.coach)"
                class="clickable-avatar"
              />
              <n-text class="coach-name clickable-coach-name" @click.stop="handleCoachAvatarClick(course.coach)">{{ course.coach?.nickname }}</n-text>
            </n-flex>
              <n-space align="center" :size="12">
              <n-button text @click.stop="handleLike(course)">
                <template #icon>
                  <n-icon :color="course.isLiked ? '#2080f0' : ''">
                    <ThumbsUp v-if="course.isLiked" />
                    <ThumbsUpOutline v-else />
                  </n-icon>
                </template>
                {{ course.likeCount }}
              </n-button>
              <n-button text>
                <template #icon>
                  <n-icon><ChatbubbleEllipses /></n-icon>
                </template>
                {{ course.commentCount }}
              </n-button>
            </n-space>
          </n-flex>
            <!-- 教练编辑按钮 -->
          <n-flex v-if="isCoach && currentUserCourseIds.has(course.courseId)" justify="center" style="margin-top: 12px;">
            <n-button 
              type="primary" 
              size="small" 
              @click.stop="handleEditCourse(course)"
              style="width: 100%;"
            >
              <template #icon>
                <n-icon><CreateOutline /></n-icon>
              </template>
              编辑课程
            </n-button>
          </n-flex>
        </n-space>
      </n-card>
    </div>

    <!-- 详情弹窗 -->
    <n-modal v-model:show="showDetailModal" preset="card" style="width: 600px; max-width: 90vw;">
      <n-card :bordered="false" content-style="padding: 0;" class="detail-card">
        <!-- 教练信息头部 -->
        <div class="coach-header">          <n-flex align="center" class="coach-profile">
            <n-avatar
              round
              size="medium"
              :src="currentCourse?.coach?.avatarImgUrl?.startsWith('http') ? currentCourse.coach.avatarImgUrl : (currentCourse?.coach?.avatarImgUrl ? BASE_URL + currentCourse.coach.avatarImgUrl : '/default_avatar.svg')"
            />
            <n-space vertical size="small" style="margin-left: 12px;">
              <n-text strong>{{ currentCourse?.coach?.nickname }}</n-text>
              <n-text depth="3" size="tiny">{{ currentCourse?.createTime }}</n-text>
            </n-space>
          </n-flex>
        </div>

        <!-- 课程标题 -->
        <div class="detail-header">
          <n-h2>{{ currentCourse?.title }}</n-h2>
        </div>        <!-- 课程视频/动图 -->
        <video
          v-if="currentCourse?.videoUrl"
          :src="currentCourse.videoUrl.startsWith('http') ? currentCourse.videoUrl : BASE_URL + currentCourse.videoUrl"
          class="course-video"
          controls
          preload="metadata"
        >
          您的浏览器不支持视频播放，请更新浏览器版本。
        </video>

        <!-- 课程详细信息 -->
        <div class="detail-content">
          <n-space vertical size="large">
            <!-- 动作要领 -->
            <n-space vertical>
              <n-text strong>动作要领</n-text>
              <n-text class="content-text">{{ currentCourse?.description }}</n-text>
            </n-space>

            <!-- 时间信息 -->
            <n-space justify="space-between" align="center">
              <n-text depth="3" size="small">创建时间：{{ currentCourse?.createTime }}</n-text>
              <n-text depth="3" size="small">更新时间：{{ currentCourse?.updateTime }}</n-text>
            </n-space>
          </n-space>

          <!-- 评论区 -->
          <n-divider />
          <div class="comment-section">
            <n-space vertical :size="16">
              <!-- 评论计数 -->
              <n-flex justify="space-between" align="center">
                <n-text strong>评论</n-text>
                <n-tag :bordered="false" size="small" type="info">{{ currentCourse?.commentCount || 0 }}</n-tag>
              </n-flex>

              <!-- 评论输入框 -->
              <n-input
                v-model:value="newComment"
                type="textarea"
                placeholder="写下你的评论..."
                :autosize="{ minRows: 2, maxRows: 4 }"
              />
              <n-button
                block
                type="primary"
                @click="handleSendComment"
                :disabled="!newComment.trim()"
              >
                发送评论
              </n-button>              <!-- 评论列表 -->
              <template v-if="currentCourse?.comments?.length">
                <n-thing
                  v-for="comment in currentCourse.comments"
                  :key="comment.commentId"
                  class="comment-item"
                >
                  <template #avatar>
                    <n-avatar
                      :src="comment.avatarImgUrl ? BASE_URL + comment.avatarImgUrl : '/default_avatar.svg'"
                      round
                      :size="40"
                      fallback-src="/default_avatar.svg"
                    />
                  </template>
                  <template #header>
                    <n-space align="center" :size="8">
                      <n-text strong>{{ comment.nickname || comment.userNickname }}</n-text>
                      <n-text depth="3" size="tiny">{{ comment.createTime }}</n-text>
                    </n-space>
                  </template>
                  <template #description>
                    <n-text depth="2">{{ comment.content }}</n-text>
                  </template>
                </n-thing>
              </template>
              <template v-else>
                <n-empty description="暂无评论" />
              </template>
            </n-space>
          </div>        </div>
      </n-card>
    </n-modal>

    <!-- 编辑课程弹窗 -->
    <n-modal v-model:show="showEditModal" preset="dialog" title="编辑课程">
      <template #header>
        <div>编辑课程</div>
      </template>
      <n-form
        ref="editFormRef"
        :model="editForm"
        :rules="editRules"
        label-placement="left"
        label-width="100"
        require-mark-placement="right-hanging"
      >
        <n-form-item label="课程标题" path="title">
          <n-input v-model:value="editForm.title" placeholder="请输入课程标题" />
        </n-form-item>
        <n-form-item label="器械名称" path="equipmentName">
          <n-input v-model:value="editForm.equipmentName" placeholder="请输入器械名称" />
        </n-form-item>
        <n-form-item label="动作要领" path="description">
          <n-input
            v-model:value="editForm.description"
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 10 }"
            placeholder="请输入动作要领详细说明"
          />
        </n-form-item>
        <n-form-item label="课程封面" path="coverImg">
          <n-upload
            :custom-request="handleEditImageUpload"
            :file-list="editImageList"
            @change="handleEditImageChange"
            accept="image/*"
            :max="1"
            list-type="image-card"
          >
            点击上传封面图片
          </n-upload>
        </n-form-item>
        <n-form-item label="教学视频" path="videoUrl">
          <n-upload
            :custom-request="handleEditVideoUpload"
            :file-list="editVideoList"
            @change="handleEditVideoChange"
            accept="video/*"
            :max="1"
            list-type="image-card"
          >
            点击上传教学视频
          </n-upload>
        </n-form-item>
      </n-form>
      <template #action>
        <n-space>
          <n-button @click="showEditModal = false">取消</n-button>
          <n-button type="primary" @click="saveCourseEdit" :loading="editLoading">保存</n-button>        </n-space>
      </template>
    </n-modal>
    
    <!-- 教练信息弹窗 -->
    <CoachInfoPopup
      v-model:show="showCoachInfoPopup"
      :user-id="selectedCoachUserId"
      :coach-info="selectedCoachInfo"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useMessage } from 'naive-ui'
import CommonHeader from '../../components/CommonHeader.vue'
import CoachInfoPopup from '../../components/CoachInfoPopup.vue'
import { ChatbubbleEllipses, ThumbsUp, ThumbsUpOutline, CreateOutline } from '@vicons/ionicons5'
import axios from 'axios'
import http from '../../utils/http.js'
import { useRouter } from 'vue-router'

const message = useMessage()
const router = useRouter()
const BASE_URL = window.BASE_URL

// 获取用户信息的工具函数
function getUser() {
  const userStr = localStorage.getItem('user');
  return userStr ? JSON.parse(userStr) : null;
}

const userInfo = ref(getUser());

// 课程列表数据 - 从数据库获取
const courseList = ref([])

// 详情弹窗控制
const showDetailModal = ref(false)
const currentCourse = ref(null)
const newComment = ref('')

// 教练信息弹窗控制
const showCoachInfoPopup = ref(false)
const selectedCoachUserId = ref(null)
const selectedCoachInfo = ref(null)

// 编辑课程相关数据
const showEditModal = ref(false)
const editFormRef = ref(null)
const editLoading = ref(false)
const editImageList = ref([])
const editVideoList = ref([])

const editForm = ref({
  courseId: null,
  title: '',
  equipmentName: '',
  description: '',
  coverImg: '',
  videoUrl: ''
})

// 编辑表单验证规则
const editRules = {
  title: {
    required: true,
    message: '请输入课程标题',
    trigger: ['blur', 'input']
  },
  equipmentName: {
    required: true,
    message: '请输入器械名称',
    trigger: ['blur', 'input']
  },
  description: {
    required: true,
    message: '请输入动作要领',
    trigger: ['blur', 'input']
  },
  coverImg: {
    required: true,
    message: '请上传课程封面',
    trigger: ['blur', 'change']
  }
}

// 获取所有课程列表
const fetchCourseList = async () => {
  try {
    const response = await axios.get(BASE_URL + '/v1/course/select')
    if (response.data.code === 2000) {
      const courses = response.data.data
      console.log("课程列表：", courses);
        // 为每个课程获取教练信息
      const coursesWithCoachInfo = await Promise.all(
        courses.map(async (course) => {
          try {
            // 先获取教练信息，再获取用户信息
            const coachResponse = await axios.get(`${BASE_URL}/v1/coach/selectByUserId?userId=${course.coachId}`)
            if (coachResponse.data.code === 2000 && coachResponse.data.data) {
              const coachData = coachResponse.data.data
              // 使用教练的userId获取用户信息
              const userResponse = await axios.get(`${BASE_URL}/v1/user/selectByUserId?userId=${coachData.userId}`)
              if (userResponse.data.code === 2000) {
                course.coach = userResponse.data.data
              }
            }
          } catch (error) {
            console.error('获取教练信息失败:', error)
            course.coach = null
          }
          // 初始化课程的点赞状态
          course.isLiked = false
          course.likeCount = course.likeCount || 0
          course.commentCount = course.commentCount || 0
          return course
        })      )
      
      // 按点赞数降序排序（点赞数高的在前面）
      courseList.value = coursesWithCoachInfo.sort((a, b) => (b.likeCount || 0) - (a.likeCount || 0))
      console.log("课程列表（含教练信息，按点赞数排序）：", courseList.value);
      
      // 在获取课程列表后更新当前用户的课程所有权信息
      await updateCurrentUserCourses()
    } else {
      message.error(response.data.msg || '获取课程列表失败')
    }
  } catch (error) {
    console.error('获取课程列表失败:', error)
    message.error('获取课程列表失败，请稍后重试')
  }
}

// 在页面加载时获取课程列表
onMounted(async () => {
  // 从数据库API获取真实课程数据
  await fetchCourseList()
  console.log("已从数据库加载课程数据：", courseList.value);
})

// 处理卡片点击
const handleCardClick = async (course) => {
  currentCourse.value = course
  showDetailModal.value = true
  // 获取评论
  await refreshCourseComments()
}

// 刷新课程评论列表
const refreshCourseComments = async () => {
  if (!currentCourse.value) return
  
  try {
    const response = await axios.get(`${BASE_URL}/api/comments/target/${currentCourse.value.courseId}/2`);
    if (response.data.code === 2000) {
      currentCourse.value.comments = response.data.data || [];
      currentCourse.value.commentCount = currentCourse.value.comments.length;
    }
  } catch (error) {
    console.error('获取评论失败:', error);
  }
};

// 处理点赞
const handleLike = async (course) => {
  if (!course) return
  
  const user = window.getUser ? window.getUser() : null;
  if (!user) {
    message.warning('请先登录');
    return;
  }
  
  try {
    const response = await http.post('/v1/like/toggle', {
      targetId: course.courseId,
      targetType: 3 // 课程类型为3
    });
    
    if (response.data.code === 2000) {
      const likeData = response.data.data;
        // 更新课程的点赞状态
      course.isLiked = likeData.isLiked;
      course.likeCount = likeData.likeCount;
      
      message.success(likeData.isLiked ? '点赞成功' : '取消点赞');
    } else {
      message.error(response.data.msg || '操作失败');
    }
  } catch (error) {
    console.error('点赞操作失败:', error);
    message.error('操作失败，请稍后重试');
  }
}

// 发送评论
const handleSendComment = async () => {
  if (!newComment.value.trim()) {
    message.warning('请输入评论内容')
    return
  }
  
  const user = window.getUser ? window.getUser() : null;
  if (!user) {
    message.warning('请先登录')
    return
  }
  
  try {
    const response = await axios.post(`${BASE_URL}/api/comments`, {
      targetId: currentCourse.value.courseId,
      targetType: 2, // 课程类型为2
      content: newComment.value.trim(),
      userId: user.userId
    });
    
    if (response.data.code === 2000) {
      message.success('评论成功');
      newComment.value = '';
      // 重新获取评论列表
      await refreshCourseComments();
    } else {
      message.error(response.data.msg || '评论失败');
    }
  } catch (error) {
    console.error('评论失败:', error);
    message.error('评论失败，请稍后重试');
  }
}

// 处理教练头像点击
const handleCoachAvatarClick = (coach) => {
  console.log('点击了教练头像，参数:', coach);
  console.log('coach类型:', typeof coach);
  console.log('coach内容:', JSON.stringify(coach, null, 2));
  
  if (!coach) {
    console.log('教练数据为空，函数返回');
    return;
  }
  
  // 检查用户身份是否为教练（role = 2）
  if (coach.role !== 2) {
    console.log('用户身份不是教练，role:', coach.role, '不弹出教练信息弹窗');
    message.info('该用户不是教练');
    return;
  }
  
  console.log('设置教练信息，userId:', coach.userId);
  selectedCoachUserId.value = coach.userId;
  selectedCoachInfo.value = coach;
  showCoachInfoPopup.value = true;
  console.log('弹窗状态已设置为 true');
}

// 查看教练详情
const viewCoachProfile = (coachId) => {
  router.push({
    path: `/user/center/${coachId}`,
    query: { readonly: true }
  });
}

// 跳转到私聊
const chatWithCoach = (coachId) => {
  // TODO: 实现私聊功能
  message.info('私聊功能开发中...')
}

// 查看证书
const viewCertificate = (cert) => {
  window.open(BASE_URL + cert.url, '_blank')
}

// 添加教练身份判断
const isCoach = computed(() => {
  const result = userInfo.value?.role === 2;
  console.log('isCoach 检查:', {
    userInfo: userInfo.value,
    role: userInfo.value?.role,
    isCoach: result
  });
  return result;
})

// 存储当前用户拥有的课程ID
const currentUserCourseIds = ref(new Set())

// 更新当前用户的课程ID集合
const updateCurrentUserCourses = async () => {
  if (!userInfo.value || userInfo.value.role !== 2) {
    currentUserCourseIds.value.clear()
    return
  }
  
  try {
    // 先获取当前用户的教练信息
    const coachResponse = await axios.get(`${BASE_URL}/v1/coach/selectByUserId?userId=${userInfo.value.userId}`)
    if (coachResponse.data.code === 2000 && coachResponse.data.data) {
      const currentUserCoachId = coachResponse.data.data.coachId
      
      // 找出当前用户发布的课程
      const courseIds = new Set()
      for (const course of courseList.value) {
        if (course.coachId === currentUserCoachId) {
          courseIds.add(course.courseId)
        }
      }
      currentUserCourseIds.value = courseIds
      
      console.log('当前用户的教练ID:', currentUserCoachId)
      console.log('当前用户的课程ID列表:', Array.from(courseIds))
    }
  } catch (error) {
    console.error('获取当前用户教练信息失败:', error)
    currentUserCourseIds.value.clear()
  }
}

// 判断当前用户是否拥有该课程
const isCurrentUserCourse = async (course) => {
  if (!userInfo.value || !course) {
    console.log('isCurrentUserCourse: 缺少userInfo或course', { userInfo: userInfo.value, course });
    return false;
  }
  
  // 首先检查用户是否是教练
  const isCoach = userInfo.value.role === 2;
  if (!isCoach) {
    return false;
  }
  
  try {
    // 获取教练信息，比较教练的userId
    const coachResponse = await axios.get(`${BASE_URL}/v1/coach/selectByUserId?userId=${course.coachId}`)
    if (coachResponse.data.code === 2000 && coachResponse.data.data) {
      const match = userInfo.value.userId === coachResponse.data.data.userId;
      console.log('isCurrentUserCourse 检查:', {
        userId: userInfo.value.userId,
        coachUserId: coachResponse.data.data.userId,
        coachId: course.coachId,
        match: match,
        course: course
      });
      return match;
    }
  } catch (error) {
    console.error('获取教练信息失败:', error)
  }
  
  return false;
}

// 处理编辑课程
const handleEditCourse = (course) => {
  // 填充编辑表单数据
  editForm.value = {
    courseId: course.courseId,
    title: course.title,
    equipmentName: course.equipmentName,
    description: course.description,
    coverImg: course.coverImg,
    videoUrl: course.videoUrl
  };

  // 设置图片列表用于显示
  if (course.coverImg) {
    editImageList.value = [{
      id: 'cover',
      name: 'cover.jpg',
      status: 'finished',
      url: BASE_URL + course.coverImg
    }];
  } else {
    editImageList.value = [];
  }

  // 设置视频列表用于显示
  if (course.videoUrl) {
    editVideoList.value = [{
      id: 'video',
      name: 'video.mp4',
      status: 'finished',
      url: BASE_URL + course.videoUrl
    }];
  } else {
    editVideoList.value = [];
  }

  showEditModal.value = true;
}

// 编辑课程保存
const saveCourseEdit = async () => {
  try {
    await editFormRef.value?.validate();
    editLoading.value = true;

    // 构造更新数据
    const updateData = {
      courseId: editForm.value.courseId,
      coachId: userInfo.value.userId, // 添加当前用户的ID作为教练ID
      title: editForm.value.title,
      equipmentName: editForm.value.equipmentName,
      description: editForm.value.description,
      coverImg: editForm.value.coverImg,
      videoUrl: editForm.value.videoUrl
    };

    console.log('发送课程更新数据:', updateData);

    const response = await axios.post(`${BASE_URL}/v1/course/update`, updateData);
    if (response.data.code === 2000) {
      message.success('课程更新成功');
      showEditModal.value = false;
      // 刷新课程列表
      await fetchCourseList();
    } else {
      message.error(response.data.msg || '更新失败');
    }
  } catch (error) {
    console.error('更新课程失败:', error);
    if (error.message) {
      message.error('请检查表单填写是否正确');
    } else {
      message.error('更新失败');
    }
  } finally {
    editLoading.value = false;
  }
};

// 处理编辑时的图片上传
const handleEditImageUpload = async ({ file, onFinish, onError }) => {
  const formData = new FormData();
  formData.append('file', file.file);

  try {
    const response = await axios.post(`${BASE_URL}/v1/file/upload`, formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });

    if (response.data.code === 2000) {
      editForm.value.coverImg = response.data.data;
      file.url = BASE_URL + response.data.data;
      message.success('图片上传成功');
      onFinish();
    } else {
      message.error(response.data.msg || '图片上传失败');
      onError();
    }
  } catch (error) {
    console.error('图片上传失败:', error);
    message.error('图片上传失败');
    onError();
  }
};

// 处理编辑时的视频上传
const handleEditVideoUpload = async ({ file, onFinish, onError }) => {
  const formData = new FormData();
  formData.append('file', file.file);

  try {
    const response = await axios.post(`${BASE_URL}/v1/file/upload`, formData, {
      headers: { 'Content-Type': 'multipart/form-data' }
    });

    if (response.data.code === 2000) {
      editForm.value.videoUrl = response.data.data;
      file.url = BASE_URL + response.data.data;
      message.success('视频上传成功');
      onFinish();
    } else {
      message.error(response.data.msg || '视频上传失败');
      onError();
    }
  } catch (error) {
    console.error('视频上传失败:', error);
    message.error('视频上传失败');
    onError();
  }
};

// 处理编辑时的图片变更
const handleEditImageChange = (options) => {
  const { file, fileList } = options;
  editImageList.value = fileList;
  
  if (file.status === 'finished') {
    editForm.value.coverImg = file.url.replace(BASE_URL, '');
  } else if (file.status === 'removed') {
    editForm.value.coverImg = '';
    editImageList.value = [];
  }
};

// 处理编辑时的视频变更
const handleEditVideoChange = (options) => {
  const { file, fileList } = options;
  editVideoList.value = fileList;
  
  if (file.status === 'finished') {
    editForm.value.videoUrl = file.url.replace(BASE_URL, '');
  } else if (file.status === 'removed') {
    editForm.value.videoUrl = '';
  editVideoList.value = [];
  }
};

</script>

<style scoped>
.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.course-card {
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.course-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  transition: transform 0.3s ease;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.course-card:hover .course-image {
  transform: scale(1.05);
}

.course-info {
  padding: 16px;
  flex: 1;
}

.course-title {
  font-size: 18px;
  line-height: 1.4;
}

/* 内容文本样式 */
.content-text {
  white-space: pre;
  word-break: break-word;
  line-height: 1.8;
  padding: 24px;
  background-color: #f9f9f9;
  border-radius: 8px;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
  letter-spacing: 0.5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 使用深度选择器确保样式生效 */
.detail-content :deep(.n-text.content-text) {
  display: block;
  margin: 0;
  overflow-x: hidden;
}

/* 详情弹窗样式 */
.detail-card {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.detail-header {
  padding: 20px 20px 0;
}

.course-video {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  background: #000;
}

.detail-content {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.detail-content :deep(.n-space) {
  width: 100%;
}

.detail-content :deep(.n-text) {
  margin: 8px 0;
}

/* 标题样式 */
.detail-content :deep(.n-h2) {
  margin: 16px 0;
  font-size: 24px;
  color: #333;
}

/* 评论区样式 */
.comment-section {
  margin-top: 24px;
}

.comment-item {
  padding: 16px;
  border-bottom: 1px solid var(--n-border-color);
}

.comment-item:last-child {
  border-bottom: none;
}

/* 教练信息样式 */
.coach-info {
  gap: 8px;
}

.coach-name {
  font-size: 14px;
  color: #666;
}

/* 可点击的教练头像和姓名样式 */
.clickable-avatar {
  cursor: pointer;
  transition: all 0.2s ease;
}

.clickable-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.clickable-coach-name {
  cursor: pointer;
  transition: all 0.2s ease;
}

.clickable-coach-name:hover {
  color: #2080f0;
  text-decoration: underline;
}

.coach-header {
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.coach-profile {
  cursor: pointer;
}
</style>
